import Container from "@/components/container";
import {Radio, RadioGroup} from "@douyinfe/semi-ui";
import {useState} from "react";
import s from './index.module.less'
import {ProjectPageItem, ProjectPage, } from "@/schemas/project.ts";

const BasePage = () => {
    return <div>BasePage</div>
}

const OwnerPage = () => {
    return <div>OwnerPage</div>
}

const ContractorPage = () => {
    return <div>ContractorPage</div>
}

const ProcedurePage = () => {
    return <div>ProcedurePage</div>
}


const Project = () => {

    const [currentPage, setCurrentPage] = useState<ProjectPage>("base");

    const pages: { [type: string]: ProjectPageItem } = {
        base: {
            title: "基本信息",
            form: <BasePage/>
        },
        owner: {
            title: "被测单位",
            form: <OwnerPage/>
        },
        contractor: {
            title: "测评单位",
            form: <ContractorPage/>,
        },
        procedure: {
            title: "测评过程",
            form: <ProcedurePage/>,
        }

    }

    return <Container className={s.container}>
        <RadioGroup
            onChange={e => setCurrentPage(e.target.value)}
            value={currentPage}
            type="button"
            style={{
                display: 'flex',
                width: 360,
                justifyContent: 'center',
            }}
        >
            {Object.keys(pages).map(key => <Radio
                key={key}
                value={key}
            >
                {pages[key].title}
            </Radio>)}
        </RadioGroup>
        {pages[currentPage].form}
    </Container>;
}
export default Project;